import React, { Component } from 'react'
import moment from 'moment';
let count = 0;
export default class EleClock extends Component {

  //声明状态
  state = {
    timeStr: ''
  }

  //渲染方法
  render() {
    return (
      <div style={{border: 'solid 1px #666', padding: '20px', display: 'inline-block'}}>
        {this.state.timeStr}
      </div>
    )
  }

  //组件挂载完毕的生命周期方法中
  componentDidMount(){
    console.log('我执行了~~', this);
    //将定时器 id 保存在实例 this 身上
    this.timer = setInterval(() => {
      console.log(count++);
      // 获取当前时间的格式化字符串
      // console.log(moment().format('YYYY-MM-DD HH:mm:ss'));
      this.setState({
        timeStr: moment().format('YYYY-MM-DD HH:mm:ss')
      })
    }, 1000);
    //为 window 添加一个右键事件
    window.oncontextmenu = function(e){
      // console.log('你打开了右键菜单');
      //阻止右键的默认行为
      e.preventDefault();
    }
  }

  //组件将要卸载的生命周期方法
  componentWillUnmount(){
    console.log('我将要被卸载啦~~');
    //取消定时器
    clearInterval(this.timer);
    //取消window的右键事件
    window.oncontextmenu = null;
  }

}
